import React, { Suspense, lazy } from 'react'
import { createBrowserRouter } from 'react-router-dom'

import Layout from '@/layouts/Index'
const Home = lazy(() => import('@/views/Index'))
const ProTable = lazy(() => import('@/views/ProTable'))
const StorePage = lazy(() => import('@/views/Store'))
export const route = [
  {
    path: '/',
    element: <Layout></Layout>,
    children: [
      {
        path: '',
        name: '主页',
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <Home />
          </Suspense>
        ),
        meta: { title: '主页' },
      },
    ],
    name: '主页',
  },
  {
    path: '/utils',
    element: <Layout></Layout>,
    children: [
      {
        path: 'proTable',
        name: 'proTable',
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <ProTable />
          </Suspense>
        ),
        meta: { title: 'proTable' },
      },
    ],
    name: 'utils',
  },
  {
    path: '/store',
    element: <Layout></Layout>,
    name: 'store',
    children: [
      {
        path: 'store',
        name: 'store',
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <StorePage />
          </Suspense>
        ),
        meta: { title: 'proTable' },
      },
    ],
  },
]
export default createBrowserRouter(route)
